<template>
  <div class="content">
    <div class="title">
      锁区域集合
    </div>


   <section class="list" v-if="show.content">
    <div class="head">
        <div class="left">
          <input v-model="keywords" placeholder="请输入搜索内容..."  @keyup.enter="search()" type="text">
          <div class="sousuo" @click="search()">
            <img src="../assets/img/sou.png" alt="">
            搜索
          </div>
        </div>
        <div class="add" @click="addlock">
          添加区域集合
        </div>
      </div>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;margin-top:20px;">

        <el-table-column
              type="selection"
              fixed
              width="55">
            </el-table-column>
          <el-table-column
                type="index"
                fixed
                width="50">
           </el-table-column>
        <el-table-column
          prop="region_name"
          label="区域集合名称"
          width="180">
        </el-table-column>
        <el-table-column
          label="包含门锁"
          width="130">
              <template slot-scope="scope">
                   <div style="text-align: center;" v-for='item in  scope.row.lock_data.data'>
                     {{item.lockalias}}
                   </div>
              </template>
        </el-table-column>
        <el-table-column
          prop="add_time"
          label="区域集合产生时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="limit_lock"
          label="区域集合管理人员"
          width="180">
        </el-table-column>
        <el-table-column
        width="180"
        label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini" @click='edit(scope.row)'>编辑</el-button>
                <el-button
                  size="mini"
                  type="danger" @click='deletelock(scope.row)'>删除</el-button>
              </template>
            </el-table-column>
      </el-table>

</section>

     <addlock v-if="show.add" :isshow='show'></addlock>

    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
     >
     <el-form  v-model="form" label-width="100px" class="demo-ruleForm">
       <el-form-item label="区域集合名称" prop="real_name">
         <el-input v-model="form.region_name"></el-input>
       </el-form-item>
       <el-form-item>
      <el-checkbox-group v-model="form.check.id" >
         <el-checkbox       v-for='item in form.check.options'
                             :label="item.name"
                             :key="item.id"
                             :value="item.id"
                             >
               </el-checkbox>
          </el-checkbox-group>
       </el-form-item>
     </el-form>
     <div class="btn">
       <span @click="submit">提交</span>
       <span>取消</span>
     </div>
    </el-dialog>

  </div>
</template>

<script>
  import {region_list,lock_list,edit_region,delete_region} from '../js/getApi.js'
  import addlock from '@/components/add_lock'
  import pagination from '../components/pagination'
  export default{
    name:'ke_info',
    components:{addlock,pagination},
    data(){
      return{
        keywords:'',
        dialogVisible:false,
        show:{
          content:true,
          add:false
        },
        form:{
          check:{
            id:[],
            options:[]
          },
          region_id:'',
          region_name:''
        },
        tableData:[]
      }
    },
    methods:{
      addlock(){
        this.show.content=false;
        this.show.add=true;
      },
     async deletelock(row){
       const data=await delete_region(this.$store.state.token,row.id);
       alert(data.msg)
       if(data.code==1){
         this.getlist();
       }
      },
     async  search(){
         const data=await region_list(this.$store.state.token,this.keywords,1,100);
         this.tableData=data;
      },
      edit(row){
         this.dialogVisible=true;
         this.form.check.id=[];
         this.form.region_name=row.region_name;
         row.lock_data.data.forEach(item=>{
           this.form.check.id.push(item.lockalias);
         })
         this.form.region_id=row.id;
      },
     async submit(){
        let lockid='';
        this.form.check.options.forEach((item)=>{

          this.form.check.id.forEach((id)=>{
            if(id==item.name){
               lockid+=item.id+',';
            }
          })
        })

         const data=await edit_region(this.$store.state.token,this.form.region_id,this.form.region_name,lockid);
          alert(data.msg);
         if(data.code==1){
           this.dialogVisible=false;
           this.getlist();
         }

      },
     async getlist(){
        const data=await region_list(this.$store.state.token,'',1,100);
        this.tableData=data;
      }
    },
   async  created() {
       this.getlist();
       const lock=await lock_list(this.$store.state.token,'',1,100);
       lock.list.forEach((item)=>{
         this.form.check.options.push({
           id:item.lock_id,
           name:item.lockname
         });
       })
     }
  }
</script>

<style scoped>
.title{
      height: 84px;
      line-height: 84px;
      color: rgba(5, 5, 5, 100);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      border-bottom: 1px solid #F7F7F7;
  }


  .head{
    margin-top:33px;
   display: flex;
  }
  .head div{
    display: inline-block;
  }

  .head input{
    width: 190px;
    height:30px;
    border-radius:10px 0 0 10px;
    padding-left:10px;
    border: 1px solid rgba(187, 187, 187, 100);
    float: left;
  }
  .sousuo{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    color: #fff;
    cursor: pointer;
  }
  .sousuo img{
    width: 19px;
    height: 19px;
    vertical-align:middle;
  }
.add{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    color: #fff;
    font-size: 12px;
    margin-left: 50px;
    cursor: pointer;
  }





.btn{
    margin-left: 100px;
    margin-top: 100px;
    }
    .btn span{
      display:inline-block;
      cursor: pointer;
    }
 .btn span:nth-of-type(1){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(26, 188, 156, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
  }
  .btn span:nth-of-type(2){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(26, 188, 156, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(26, 188, 156, 100);
      margin-left: 20px;
     }













</style>
